<template>
  <div class="edit-dialog-container">
    <el-dialog
      :title="state.dialog.title"
      v-model="state.dialog.isShowDialog"
      width="569px"
      destroy-on-close
      :show-close="false"
    >
        <el-input v-model="state.content.code" ref="inputRef" placeholder="请刷卡"  @focus="onFocus" clearable/>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onSubmit" type="success" size="default">激活</el-button>
          <el-button @click="onCancel" size="default">{{
            t("message.btnName.close")
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref ,nextTick} from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage, UploadProps, messageConfig } from "element-plus";
import { StarFilled } from "@element-plus/icons-vue";
import { useUpdateEmployeeToDeviceApi } from '/@/api/person/employee';

// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(["refresh"]);

// 定义变量内容
const inputRef = ref();

const useContent = () => {
  return {
    code: "", // 卡号
  };
};

const state = reactive({
  content: {} as any,
  dictConfig: [] as any,
  dialog: {
    isShowDialog: false,
    title: "临时卡激活",
  },
});



// 打开弹窗
const openDialog = () => {
  state.dialog.isShowDialog = true;
  nextTick(()=>{
       inputRef.value.focus()  
    })
};

const onFocus = ()=>{
inputRef.value.focus()
}

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
  state.content = useContent();
  emit("refresh");
};
// 取消
const onCancel = () => {
  closeDialog();
};

// 提交
const onSubmit = () => {
    if(state.content.code){
      useUpdateEmployeeToDeviceApi(state.content.code).then(({code})=>{
        if(code!=-2){
        ElMessage.success('激活成功');
        state.content = useContent();
        onFocus()
        }
      })
    }
};

defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
:deep(.el-dialog__header) {
  margin: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

:deep(.el-dialog__footer) {
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
}
</style>
